<html><head>
<style>
h1 {
	margin: 0;
}
#ChatLog {
	width: 600px;
	height: 400px;
	font-size: 12px;
	font-family: Courier New;
}
input[type=text] {
	width: 300px;
}

</style>

<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jsSO.js"></script>

<script type="text/javascript">

jsSO.connect('rtmp://pro-web.at/SOSample', 'chat');

// select color
var rand = Math.round(Math.random()*100000)%4;
var color = (['blue', 'red', 'green', 'black'])[rand];

// handle stage pixel updates
jsSO.onSync(function(event, updates, data) {
	if (updates.message) {
		var date = new Date();
		date.setTime(data.message.time);

		$('#ChatLog').append('<div style="color: '+data.message.from+'">['+date.toLocaleString()+'] '+data.message.from+': '+data.message.text+'</div>');
	}
});

$(function(){
	$('body').prepend('<h1>You are: '+color+'</h1>');
	$('input[type=text]').focus();

	function send()
	{
		var text = $('input[type=text]').val();
		if (!text) {
			return false;
		}

		jsSO.set('message', {
			from: color,
			time: (new Date()).getTime(),
			text: text
		});

		$('input[type=text]').val('').focus();

		return false;
	}

	$('input[type=button]').click(send);
	$('form').submit(send);
});

</script>

</head>
<body>
<form>
	<div id="ChatLog"></div>
	<input type="text" /><input type="button" value="send" />
</form>
</body>
</html>
